<template>
    <div>
        <basic-container>
            <el-form ref="searchForm" :model="searchForm" size="mini" :inline="true">
                <el-form-item label="出库状态">
                    <el-select v-model="searchForm.state" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="订单未通过" value="0"></el-option>
                        <el-option label="待出库" value="1"></el-option>
                        <el-option label="已出库" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审批编号">
                    <el-input v-model="searchForm.code" placeholder="请输入申请部门"></el-input>
                </el-form-item>
                <!--<el-form-item label="仓库">
                    <el-select v-model="searchForm.warehouse" placeholder="请选择">
                        <el-option label="全部" value="-1"></el-option>
                        <el-option v-for="(item) in warehouseData" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>-->
                <!--<el-form-item label="申请部门">
                    <el-input v-model="searchForm.department" placeholder="请输入申请部门"></el-input>
                </el-form-item>-->
                <!--<el-form-item label="申请人">
                    <el-input v-model="searchForm.people" placeholder="请输入申请人"></el-input>
                </el-form-item>-->
                <el-form-item label="">
                    <el-button type="primary" size="small"  plain @click.stop="searchFormSubmit()">搜索</el-button>
                    <el-button size="small"  plain @click.stop="searchFormReset()">重置</el-button>
                </el-form-item>
            </el-form>
            <avue-crud :option="tabOption" :data="tebData" :table-loading="tebLoading" :page="page" ref="crud" @current-change='tebPageChange' @size-change="tebSizeChange">
                <template slot-scope="scope" slot="chukuzhuangtai">
                    {{chukuzhuangtaiType[scope.row.chukuzhuangtai]}}<!--<el-button type="info" plain size="mini" @click.stop="processBtn(scope.row,scope.index)">备注</el-button>-->
                </template>
                <template slot-scope="scope" slot="apply">
                    {{scope.row.applyUserDepartmentName}}<span>/</span>{{scope.row.applyUserName}}
                </template>
                <template slot-scope="scope" slot="menu">
                    <el-button v-if="scope.row.chukuzhuangtai != 2" type="primary" size="small"  plain @click.stop="examinMenuBtn(scope.row,scope.index)">出库</el-button>
                    <el-button type="primary" size="small"  plain @click.stop="seeMenuBtn(scope.row,scope.index)">查看出库</el-button>
                    <el-button v-if="scope.row.chukuzhuangtai != 1" type="primary" size="small"  plain @click.stop="printingMenuBtn(scope.row,scope.index)">申请单</el-button>
                </template>
            </avue-crud>
        </basic-container>

        <!--this.activities = row.processList
        &lt;!&ndash; 备注信息 &ndash;&gt;
        <el-dialog title="备注信息" :visible.sync="processMode" width="35%" class="examineModeClass">
            <el-row>
                <el-col :span="3">已出库</el-col>
                <el-col :span="3">出库人</el-col>
                <el-col :span="6">年-月-日  时：分</el-col>
            </el-row>
            <el-row>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="processMode = false">关  闭</el-button>
            </span>
        </el-dialog>-->

        <!-- 流程 -->
        <el-dialog title="流程" :visible.sync="processMode" width="35%">
            <div class="block">
                <ul class="el-timeline is-reverse">
                    <li class="el-timeline-item" v-for="(activity, index) in activities"
                        :key="index">
                        <div class="el-timeline-item__tail"></div>
                        <div class="el-timeline-item__node el-timeline-item__node--normal el-timeline-item__node--"></div>
                        <div class="el-timeline-item__wrapper">
                            <el-card>
                                <div class="el-timeline-item__content">审批人：{{activity.receiveDealerName}}&nbsp;&nbsp;&nbsp;
                                    {{dealTypeData[activity.dealType]}}</div>
                                <div class="el-timeline-item__timestamp is-bottom">{{activity.dealDate}}</div>
                                <h4>{{validatenull(activity.dealNote)?"(无审批备注)":activity.dealNote}}</h4>
                            </el-card>
                        </div>
                    </li>
                </ul>
            </div>
        </el-dialog>

        <!-- 领用出库单 -->
        <el-dialog title="领用出库单" :visible.sync="examineMode" width="60%" center class="examineModeClass">
            <el-row><el-col :span="24">审批单号：{{examineModeData.coded}}</el-col></el-row>
            <el-row><el-col :span="6">部门：{{examineModeData.applyUserDepartmentName}}</el-col>
                <el-col :span="6">申请人：{{examineModeData.applyUserName}}</el-col>
                <el-col :span="6">申请时间：{{examineModeData.purchasingDate}}</el-col></el-row>
            <el-row><el-col :span="24">备注：{{examineModeData.note}}</el-col></el-row>

            <avue-crud class="customForm" :option="examineModeTabOption" :data="examineModeTabData" :table-loading="examineModeTabLoading"  ref="crud">
                <template slot-scope="scope" slot="num">
                    <el-row v-show="examineModeType != 2" v-for="(domain, index) in examineModeTabData[scope.row.$index].outBoundInfoList">
                        <span>{{domain.batch}} / {{domain.num}}</span>
                    </el-row>
                    <el-form v-show="examineModeType == 2" :model="examineModeTabFrom[scope.row.$index]" :ref="'examineModeTabFrom'+scope.row.$index" class="demo-dynamic">
                        <el-row>
                            <el-col :span="10">
                                <el-form-item prop="batch" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                                    <el-input size="mini" placeholder="请输入批次号" v-model="examineModeTabFrom[scope.row.$index].batch"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <el-form-item prop="num" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                                    <el-input size="mini" placeholder="请输入出库量"v-model="examineModeTabFrom[scope.row.$index].num"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2"><el-button size="mini" type="text" @click="addDomain(scope.row)">添加</el-button></el-col>
                        </el-row>
                    </el-form>
                    <el-form v-show="examineModeType == 2" :model="examineModeTabData[scope.row.$index]" :ref="'examineModeTabDataForm'+scope.row.$index" class="demo-dynamic">
                       <el-row v-for="(domain, index) in examineModeTabData[scope.row.$index].outBoundInfoList"  :key="index">
                           <el-col :span="10">
                               <el-form-item :prop="'outBoundInfoList.' + index + '.batch'" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                                <el-input size="mini" placeholder="请输入批次号" v-model="domain.batch"></el-input>
                            </el-form-item>
                           </el-col>

                           <el-col :span="10">
                               <el-form-item :prop="'outBoundInfoList.' + index + '.num'" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                                       <el-input size="mini" placeholder="请输入出库量" v-model="domain.num"></el-input>
                               </el-form-item>
                           </el-col>

                           <el-col :span="2">
                               <el-form-item>
                                   <el-button size="mini" type="text" @click.prevent="removeDomain(scope.row,index)">删除</el-button>
                               </el-form-item>
                           </el-col>
                       </el-row>
                    </el-form>
                </template>
            </avue-crud>

            <span slot="footer" class="dialog-footer" style="text-align: center;">
                <!--<el-button v-show="examineModeType == 3" size="small" type="primary" @click="examineMode = false">打印</el-button>-->
                <el-button v-show="examineModeType == 2" size="small" type="primary" @click="outOfStock()">出库</el-button>
                <el-button size="small" @click="examineMode = false">关  闭</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import { tabOption,examineModeTabOption} from "@/const-personal/dangerous/receive/outStock.js"
    import { validatenull } from '@/util/validate'
    import { getListWarehouseAll } from "@/api/public/warehouse.js"
    import { getListOfReceiveOut ,getReceive,getReceiveOverride ,insertOutBoundReceive} from "@/api/dangerous/receive/receive.js"
    export default {
        data() {
            return {
                activities: [],
                examineModeData:{},
                chukuzhuangtaiType:['订单未通过','待出库', '已出库'],
                warehouseData: [],
                //搜索表单数据
                searchForm: {
                    state : '', //出库状态
                    warehouse: '-1', //仓库
                    department: '',  //申请部门
                    people:''  //申请人
                },
                //领用出库单添加批次号
                examineModeTabFrom:[
                    {
                        batch: '',
                        num: ''
                    },
                    {
                        batch: '',
                        num: ''
                    }
                    ],
                //表格结构
                tabOption: tabOption,
                examineModeTabOption:examineModeTabOption,
                //表格数据
                tebData: [],
                examineModeTabData: [],
                //表格等待
                tebLoading: false,
                examineModeTabLoading:false,
                //表格分页
                page: {
                    total: 0, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 10 , //每页显示多少条
                    pageSizes: [5,10,20] //显示多少条数据
                },
                //表格分页
                tebDataPage: {
                    total: 0, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 10 , //每页显示多少条
                    pageSizes: [5,10,20] //显示多少条数据
                },
                examineModeDataPage: {
                    total: 0, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 10 , //每页显示多少条
                    pageSizes: [5,10,20] //显示多少条数据
                },
                //启用弹框
                processMode: false,
                examineMode: false,
                //模态框类型
                examineModeType: 0 ,
            }
        },
        created(){
            this.getWarehouseData();
            this.searchFormSubmit();
        },
        methods: {
            //tab-分页
            tebPageChange(val){
                this.page.currentPage = val;
                this.searchFormSubmit();
            },
            //tab-分页大小
            tebSizeChange(val){
                this.page.pageSize = val;
                this.searchFormSubmit();
            },
            //仓库数据
            getWarehouseData(){
                getListWarehouseAll().then(res =>{
                    if(res.data.code==200){
                        res.data.data.forEach(item=>{
                            this.warehouseData.push({label:item.name,value:item.id})
                        })
                    } else {
                        this.$notify.error({ title: '查询失败', message: '获取仓库数据失败！', type: 'danger', });
                    }
                })
            },
            //提交搜索
            searchFormSubmit(){
                let data = {
                    /*applyName:this.searchForm.people,
                    applyUserDepartment:this.searchForm.department,
                    warehouseId:this.searchForm.warehouse == -1 ? null : this.searchForm.warehouse,*/
                    chukuzhuangtai:this.searchForm.state == -1 ? null : this.searchForm.state,
                    coded:this.searchForm.code,
                    page : this.page.currentPage,
                    size : this.page.pageSize,
                }
                getListOfReceiveOut(data).then(res =>{
                    if(res.data.code==200){
                        this.tebData = res.data.data.list;
                        this.page.total = res.data.data.total;
                        this.page.currentPage = res.data.data.pageNum;
                        this.page.pageSize = res.data.data.pageSize;
                    } else {
                        this.$notify.error({ title: '查询失败', message: '获取列表失败！', type: 'danger', });
                    }
                })
            },
            //清空搜索
            searchFormReset(){
                this.searchForm={
                    state : '-1', //出库状态
                    warehouse: '-1', //仓库
                    department: '',  //申请部门
                    people:''  //申请人
                }
            },
            //流程
            processBtn(row,index){
                this.processMode = true;
                this.activities = row.processList
            },
            //领用出库单
            examinMenuBtn(row,index){
                getReceiveOverride(row.id).then(res =>{
                    if(res.data.code==200){
                        this.examineModeType = 2;
                        this.examineModeData = res.data.data
                        this.examineModeTabData = res.data.data.receiveInfos
                        this.examineModeTabData.forEach(item=>{
                            item.outBoundInfoList = []
                        })
                        this.examineMode = true;
                    } else {
                        this.$notify.error({ title: '查询失败', message: '获取详情数据失败！', type: 'danger', });
                    }
                })
                /*this.examineModeData = row
                this.examineModeTabData = row*/
            },
            //查看
            seeMenuBtn(row,index){
                getReceiveOverride(row.id).then(res =>{
                    if(res.data.code==200){
                        this.examineModeType = 1;
                        this.examineModeData = res.data.data
                        this.examineModeTabData = res.data.data.receiveInfos
                        this.examineMode = true;
                    } else {
                        this.$notify.error({ title: '查询失败', message: '获取详情数据失败！', type: 'danger', });
                    }
                })
            },
            //打印
            printingMenuBtn(row,index){

                getReceiveOverride(row.id).then(res =>{
                    if(res.data.code==200){
                        this.examineMode = true;
                        this.examineModeType = 3;
                        this.examineModeData = res.data.data
                        this.examineModeTabData = res.data.data.receiveInfos
                    } else {
                        this.$notify.error({ title: '查询失败', message: '获取详情数据失败！', type: 'danger', });
                    }
                })
            },
            //领用出库单添加批次号
            addDomain(row) {
                this.$refs['examineModeTabFrom'+row.$index].validate((valid) => {
                    if (!valid) {return null}
                    this.examineModeTabData[row.$index].outBoundInfoList.push({
                        batch: this.examineModeTabFrom[row.$index].batch,
                        num: this.examineModeTabFrom[row.$index].num
                    });
                    this.examineModeTabFrom[row.$index].batch = null;
                    this.examineModeTabFrom[row.$index].num = null;
                    this.$refs['examineModeTabFrom'+row.$index].resetFields();
                })
                this.$refs['examineModeTabDataForm'+row.$index].validate((valid) => {})
            },
            removeDomain(row,index) {
                if (index !== -1) {
                    this.examineModeTabData[row.$index].outBoundInfoList.splice(index, 1)
                }
            },
            //出库
            outOfStock(){
                let data = []
                let flag = false;
                this.examineModeTabData.forEach(item=>{
                    if(flag){return}
                    if(item.outBoundInfoList.length == 0){
                        flag = true;
                        this.$refs['examineModeTabFrom'+item.$index].validate((valid) => {})
                        this.$notify.error({ title: '操作失败', message: '请出入批次号、出库数量后点击添加！', type: 'danger', });
                        return null;
                    }
                    data.push({id:item.id,outBoundInfoList:item.outBoundInfoList,goodsId:item.goodsId})
                })
                if(flag){return}
                insertOutBoundReceive({id: this.examineModeData.id ,receiveInfos:data}).then(res =>{
                    if(res.data.code==200){
                        this.examineMode = false
                        this.$notify({ title: '操作成功', type: 'success', message: '已出库成功!'});
                        this.searchFormSubmit();
                    } else {
                        this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
.examineModeClass {
    .el-dialog__footer{
        text-align: center;
    }
    .el-dialog__body{
        padding: 20px 20px 0px!important;
    }
    .customForm {
        .el-col{
            margin:0px 5px 3px 0px !important;
        }
        .el-row{
            margin: 0px !important;
        }
        .el-col-2{
            margin: 0px 0px 3px 4px !important;
        }
    }
}
.demo-dynamic .el-form-item{
    margin-bottom: 0px !important;
}
.demo-dynamic .el-form-item__content{
    line-height: 1;
}
.demo-dynamic .el-form-item__error{
    padding-top: 0px;
}
.demo-dynamic .is-error{
    margin-bottom: 14px !important;
}
</style>